<template>
  <view class="container">
		<nav-ber :title="'消息详情'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="province">
			<!-- <view class="mag_flex" v-for="(item, index) in magList" :key="index">
				<view class="ico_bg">
					<u-icon name="volume-fill" size="20" color="rgb(255, 169, 5)"></u-icon>
				</view>
				<view style="flex: 1;">
					<view class="tit_flex">
						<span class="font_w">{{ item.title }}</span>
						<span style="font-size: 25rpx;color: gray;">{{ item.createTime }}</span>
					</view>
					<view style="font-size: 25rpx;color: gray;margin-top: 10rpx;">
						{{ item.content }}
					</view>
				</view>
			</view> -->
			<view class="box_msg">
				<view class="flex_l">
					<view class="w_l">
						标题：
					</view>
					<view class="w_r">
						{{ datas.title }}
					</view>
				</view> 
				
				<view class="flex_l">
					<view class="w_l">
						创建时间：
					</view>
					<view class="w_r">
						{{ datas.createTime }}
					</view>
				</view> 
				
				<view class="flex_l">
					<view class="w_l">
						内容：
					</view>
					<view class="w_r">
						{{ datas.content }}
					</view>
				</view> 
				<image v-if="rainingUrl" style="width:100%" :src="rainingUrl" mode="aspectFit"></image>
				
			</view>
		</view>
  </view>
</template>
<script>
	import { messageBuId, signReadId, trainingById } from '@/api/personalCenter.js'
  export default {
    data() {
			return {
				keyword: '',
				ispro: '1',
				datas: {},
				rainingUrl: '',
			}
    },
		onLoad(option) {
			this.messageListFun(option.id)
			this.signReadIdFun(option.id)
		},
		onShow() {
			
		},
		methods: {
			signReadIdFun(id) {
				signReadId(id).then((res) => {})
			},
			proFun(val) {
				this.ispro = val
			},
			messageListFun(id) {
				messageBuId(id).then((res) => {
					this.datas = res.data
					if (res.data.businessId) {
						trainingById(res.data.businessId).then((val) => {
							this.rainingUrl = val.data.url
						})
					}
				})
			},
		}
  }
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f7f8ff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 30rpx;
		// margin-top: 20rpx;
	}
	.mag_flex {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		margin-bottom: 25rpx;
	}
	.mag_flex:first-child {
		margin-top: 20rpx;
	}
	.ico_bg {
		background-color: rgba(255, 169, 5, 0.1);
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		box-sizing: border-box;
	}
	.font_w {
		font-weight: 900;
	}
	.tit_flex {
		width: 100%;
		display: flex;
		justify-content: space-between;;
	}
	.box_msg {
		width: 94%;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	.flex_l {
		display: flex;
		align-items: self-start;
		margin: 40rpx 0;
	}
	.w_l {
		width: 180rpx;
		text-align: right;
		color: gray;
	}
	.w_r {
		width: 480rpx;
		margin-left: 30rpx;
		word-break: break-all;
	}
</style>
